<script setup lang="ts">
import { computed, inject, ref } from "vue";
import usePatientStore from "@/pinia/modules/patientStore.ts";
import { useRouter, useRoute } from "vue-router";
import { showConfirmDialog, showFailToast, showSuccessToast } from "vant";
import type { Patient } from "@/types/patientTypes";
import type { ComputedRef } from "vue";
import type { Router, RouteLocationNormalized } from "vue-router";

const props = withDefaults(defineProps<{
    patient: Patient,
    patientId: string
}>(), {});
const emits = defineEmits<{
    (eventName: "click", patientId: string): void
}>();
const router: Router = useRouter();
const route: RouteLocationNormalized = useRoute();
const patientStore = usePatientStore();
const findPatient = inject<any>("findPatient");
/*是否为默认患者*/
const isDefaultPatient: ComputedRef<boolean> = computed<boolean>(() => props.patient.defaultFlag === 1);
/*是添加患者状态还是选择患者状态(根据路由参数selectPatient来判断)*/
/*const isSelect = computed(() => route.query.selectPatient === "true");*/
/*是否选中当前高亮选中当前患者*/
const selected=computed<boolean>(()=>props.patient.id===props.patientId)
/*消费祖宗组件的数据*/
const isSelect = inject<ComputedRef<boolean>>("isSelect");
/*删除患者的回调函数*/
const deletePatient = async () => {
    // 提示用户是否确认删除当前患者
    const dialog: "confirm" | "cancel" = await showConfirmDialog({ title: "温馨提示", message: `确认删除${props.patient.name}患者吗?` }).catch(error => error);
    // 点击的是取消return出去不执行下面的逻辑
    if (dialog === "cancel") return;
    try {
        // 发送请求删除患者
        await patientStore.deletePatient(props.patient.id as string);
        showSuccessToast("删除患者成功");
    } catch (error: any) {
        // 发送请求删除患者失败
        showFailToast(error.message);
    }
};
/*编辑患者的回调函数*/
const handleEdit = async () => {
    await findPatient(props.patient.id);
    patientStore.changeShowPopup(true);
    patientStore.changeEdit(true);
};

/*点击患者的事件将患者的id传递给父组件*/
const click = () => {
    if (!isSelect?.value) return
    emits("click", props.patient.id as string);
};
</script>

<template>
    <div class="patient-item" :class="{selected}" @click="click">
        <div class="info">
            <span class="name">{{ patient.name }}</span>
            <span class="id">{{ patient.idCard.replace(/^(.{6}).+(.{4})$/, "\$1********\$2") }}</span>
            <span>{{ patient.genderValue }}</span>
            <span>{{ patient.age }}岁</span>
        </div>
        <div class="icon">
            <svg-icon svg-name="edit" @click="handleEdit" />
        </div>
        <div class="icon">
            <svg-icon svg-name="close" @click="deletePatient" />
        </div>
        <div class="tag" v-if="isDefaultPatient">默认</div>
    </div>
</template>

<style scoped lang="scss">
.patient-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: var(--cp-bg);
    border-radius: 8px;
    margin-bottom: 15px;
    position: relative;
    border: 1px solid var(--cp-bg);
    transition: all 0.3s;
    overflow: hidden;

    .info {
        display: flex;
        flex-wrap: wrap;
        flex: 1;

        span {
            color: var(--cp-tip);
            margin-right: 20px;
            line-height: 30px;

            &.name {
                font-size: 16px;
                color: var(--cp-text1);
                width: 80px;
                margin-right: 0;
            }

            &.id {
                color: var(--cp-text2);
                width: 180px;
            }
        }
    }

    .icon {
        color: var(--cp-tag);
        width: 20px;
        text-align: center;
        margin-left: 10px;
    }

    .tag {
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 16px;
        font-size: 10px;
        color: #fff;
        background-color: var(--cp-primary);
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &.selected {
        border-color: var(--cp-primary);
        background-color: var(--cp-plain);

        .icon {
            color: var(--cp-primary);
        }
    }
}
</style>
